
html, body, #RTF {
  width: 100%;
  height: 100%;
}

#RTF {
  box-sizing: border-box;
  width: 100%;
  padding: var(--fs);
  --fs: 17px;
  white-space: pre-wrap;
  overflow: hidden;
  outline: none;
}

#RTF p,
#RTF li {
  box-sizing: border-box;
  min-width: .1px;
  min-height: calc(var(--fs) * 2);
  line-height: calc(var(--fs) * 2);
  font-size: var(--fs);
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
}
#RTF span,
#RTF b,
#RTF text-bg {
  min-width: .1px;
  line-height: 2;
}
#RTF b {
  font-weight: bold;
}
#RTF a {
  color: #005eff;
}
#RTF a:hover {
  cursor: pointer;
}

#RTF h1 p {
  text-align: center;
  font-size: calc(17px * 1.3);
  font-weight: bold;
  color: #000000;
}

#RTF h2 p {
  font-size: calc(17px * 1.2);
  font-weight: bold;
  color: #000000;
}

#RTF h3 p {
  font-size: calc(17px * 1.1);
  color: #000000;
}

#RTF h4 p {
  font-size: calc(17px);
  color: #000000;
}

#RTF code,
#RTF blockquote {
  position: relative;
  display: block;

  /* box-sizing: border-box; */
  margin: calc(var(--fs) * 0.5) 0;
  padding: var(--fs) calc(2 * var(--fs));

  background-color: #1f2430;
  border-left: 2px solid #0062ff;

  color: white;
  overflow-x: auto;
  overflow-y: hidden;
}

#RTF blockquote {
  background-color: rgb(238, 250, 255);
  border-left: 2px solid cyan;
  color: black;
}

#RTF code::after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

#RTF code p,
#RTF blockquote p {
  float: left;
  min-width: 100%;
  tab-size: 4;
  font-family: 'Consolas', 'Monospace' !important;
  white-space: pre;
  overflow-x: hidden;
}

.lang-select {
  --w: 120px;
  --h: 20px;
  position: fixed;

  top: 50vh;
  left: 50vw;

  width: var(--w);
  height: var(--h);
  font-size: calc(var(--h) * 0.4);
}

.lang-select .lang-title {
  box-sizing: border-box;
  width: var(--w);
  height: var(--h);

  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  /* border-radius: calc(var(--w) * 0.05); */
  overflow: hidden;

  border-radius: calc(var(--w) * 0.02);

  text-align: center;
  line-height: var(--h);
}

.lang-select .lang-title:hover {
  cursor: default;
}

.lang-select .lang-list {
  position: absolute;
  width: var(--w);
  top: 120%;
  left: 0;

  max-height: 230px;
  overflow-y: auto;

  border-radius: calc(var(--w) * 0.02);

  background-color: white;
  /* border-radius: calc(var(--w) * 0.05); */
}

.lang-select .lang-list.fadeOut {
  opacity: 0;
  pointer-events: none;
}

.lang-list .lang-item {
  text-align: center;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;

  line-height: 2;
}

.lang-list .lang-item:hover {
  cursor: pointer;
  background-color: rgb(235, 247, 255);
}